<template>
  <div class="address-list">
    <list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="address-item" v-for="(item, index) in addressList" :key="index">
        <div>
          <p class="name">{{item.name}}</p>
          <p class="phone">{{item.phone}}</p>
        </div>
        <div class="address">{{item.fullAddress}}</div>
        <div class="operation">
          <p>默认地址</p>
          <div>
            <p @click="goToPath('/add_address', item)">
              <icon name="edit" size="1.2rem" />
              <span>编辑</span>
            </p>
            <p @click="deleteAddress(item.id)">
              <icon name="delete" size="1.2rem" />
              <span>删除</span>
            </p>
          </div>
        </div>
      </div>
    </list>

    <!-- <address-list
      v-model="chosenAddressId"
      :list="list"
      :disabled-list="disabledList"
      disabled-text="以下地址超出配送范围"
      @add="onAdd"
      @edit="onEdit"
    />-->
  </div>
</template>

<script>
import { AddressList, Icon, Toast, List, Dialog } from "vant";
import http from "../service/myHttp.js";
import urls from "../service/url.js";
import { mapState } from "vuex";
// import areaList from "../service/area.js";

export default {
  components: {
    AddressList,
    Icon,
    List
  },
  data() {
    return {
      chosenAddressId: "1",
      loading: false,
      finished: false,
      pageNumber: 1,
      pageSize: 10,
      addressList: [
        // {
        //   id: "1",
        //   name: "张三",
        //   phone: "13000000000",
        //   fullAddress: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室"
        // },
        // {
        //   id: "2",
        //   name: "李四",
        //   phone: "1310000000",
        //   fullAddress: "浙江省杭州市拱墅区莫干山路 50 号"
        // }
      ]
      // addressList: [
      //   {
      //     id: "1",
      //     name: "张三",
      //     tel: "13000000000",
      //     fullAddress: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室"
      //   },
      //   {
      //     id: "2",
      //     name: "李四",
      //     tel: "1310000000",
      //     fullAddress: "浙江省杭州市拱墅区莫干山路 50 号"
      //   }
      // ],
      // disabledList: [
      //   {
      //     id: "3",
      //     name: "王五",
      //     tel: "1320000000",
      //     fullAddress: "浙江省杭州市滨江区江南大道 15 号"
      //   }
      // ]
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.login_module.userinfo,
      countAlias: "userInfo",
      navInfo: state => state.router_module.navInfo,
      countAlias: "navInfo"
    })
  },
  mounted() {
    if (this.navInfo.rightEvent) {
      this.$EventBus.$on(this.navInfo.rightEvent, () => {
        this.$router.push({
          path: "/add_address"
        });
      });
    }

    // this.getAddressList();
  },
  methods: {
    // 获取地址列表
    onLoad() {
      http
        .post(urls.HQDZLB, {
          uid: this.userInfo.id,
          // uid: 2,
          pageNumber: this.pageNumber,
          pageSize: this.pageSize
        })
        .then(res => {
          if (res.data.code == 200) {
            let data = res.data.data;
            data.forEach(item => {
              item.fullAddress =
                item.provinceName +
                " " +
                item.cityName +
                " " +
                item.countryName +
                " " +
                item.address;
            });
            this.addressList = this.addressList.concat(data);

            this.pageNumber++;

            console.log("继续加载");
            this.loading = false;
          } else if (res.data.code == 300) {
            console.log("加载成功");
            this.loading = false;
            this.finished = true;
          }
        });
    },

    // 删除地址
    deleteAddress(aid) {
      Dialog.confirm({
        title: "确定要删除么",
        message: ""
      })
        .then(() => {
          http
            .post(urls.XGSCDZ, {
              id: aid,
              isDelete: "Y"
            })
            .then(res => {
              if (res.data.code == 200) {
                Toast.success("删除地址成功");

                setTimeout(() => {
                  this.pageNumber = 1;
                  this.addressList = [];
                  this.loading = false;
                  this.finished = false;
                }, 1000);
              } else {
              }
            });
        })
        .catch(() => {
          // on cancel
        });
    },

    // 获取地址列表（弃用）
    getAddressList() {
      this.pageNumber = 1;

      http
        .post(urls.HQDZLB, {
          uid: this.userInfo.id,
          pageNumber: this.pageNumber,
          pageSize: this.pageSize
        })
        .then(res => {
          if (res.data.code == 200) {
            this.pageNumber++;
          }
        });
    },
    // onAdd() {
    //   Toast("新增地址");
    // },

    // onEdit(item, index) {
    //   Toast("编辑地址:" + index);
    // },

    // 编辑地址
    goToPath(path, obj) {
      this.$router.push({
        path: path,
        query: obj
        // {
        //   aid: obj.id,
        //   info: { ...obj }
        // }
      });
    }
  }
};
</script>

<style scoped>
.address-item {
  background-color: #fff;
  margin-top: 5px;
}

.address-item div:first-child {
  display: flex;
  font-size: 1rem;
  color: #090909;
  padding: 10px 15px 0 15px;
}

.phone {
  margin-left: 15px;
}

.address {
  padding: 10px 15px;
}

.operation {
  display: flex;
  justify-content: flex-end;
  flex: 1;
  padding: 10px 15px;
  border-top: 1px solid var(--line-between-color);
}

.operation > p:first-child {
  color: #283c79;
  border-radius: 3px;
  border: 1px solid #283c79;
  padding: 0 5px;
  font-size: 0.8rem;
  display: none;
  align-items: center;
}

.operation > div {
  display: flex;
  justify-content: space-between;
}

.operation > div span {
  padding-left: 3px;
}

.operation > div > p {
  display: flex;
  align-items: center;
  margin-left: 15px;
}
</style>